<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio Generator for Pomodoro Timer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .sound-item {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background: #fafafa;
        }
        .sound-item h3 {
            margin-top: 0;
            color: #333;
        }
        button {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #45a049;
        }
        .download-btn {
            background: #2196F3;
        }
        .download-btn:hover {
            background: #1976D2;
        }
        .preview-btn {
            background: #FF9800;
        }
        .preview-btn:hover {
            background: #F57C00;
        }
        .description {
            color: #666;
            font-size: 14px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🍅 番茄时钟音频生成器</h1>
        <p>为番茄时钟应用生成高质量的提示音文件</p>
        
        <div class="sound-item">
            <h3>🔔 Bell (铃声)</h3>
            <p class="description">清脆的铃声，适合工作完成提醒</p>
            <button class="preview-btn" onclick="playBell()">试听</button>
            <button class="download-btn" onclick="downloadBell()">下载 MP3</button>
        </div>
        
        <div class="sound-item">
            <h3>🎵 Chime (钟声)</h3>
            <p class="description">温和的钟声，适合休息开始提醒</p>
            <button class="preview-btn" onclick="playChime()">试听</button>
            <button class="download-btn" onclick="downloadChime()">下载 MP3</button>
        </div>
        
        <div class="sound-item">
            <h3>✨ Ding (叮声)</h3>
            <p class="description">轻快的叮声，适合短休息结束提醒</p>
            <button class="preview-btn" onclick="playDing()">试听</button>
            <button class="download-btn" onclick="downloadDing()">下载 MP3</button>
        </div>
        
        <div class="sound-item">
            <h3>📢 Notification (通知音)</h3>
            <p class="description">现代化通知音，适合长休息结束提醒</p>
            <button class="preview-btn" onclick="playNotification()">试听</button>
            <button class="download-btn" onclick="downloadNotification()">下载 MP3</button>
        </div>
        
        <div class="sound-item">
            <h3>🌟 Gentle (温和音)</h3>
            <p class="description">非常温和的提示音，不会打断专注状态</p>
            <button class="preview-btn" onclick="playGentle()">试听</button>
            <button class="download-btn" onclick="downloadGentle()">下载 MP3</button>
        </div>
        
        <div class="sound-item">
            <h3>⚡ Success (成功音)</h3>
            <p class="description">积极的成功提示音，增强成就感</p>
            <button class="preview-btn" onclick="playSuccess()">试听</button>
            <button class="download-btn" onclick="downloadSuccess()">下载 MP3</button>
        </div>
    </div>

    <script>
        let audioContext;
        
        // Initialize audio context
        function initAudioContext() {
            if (!audioContext) {
                audioContext = new (window.AudioContext || window.webkitAudioContext)();
            }
            return audioContext;
        }
        
        // Generate and play a sound
        function generateSound(config) {
            const ctx = initAudioContext();
            const { frequencies, durations, volumes, fadeIn = 0.1, fadeOut = 0.1 } = config;
            
            let startTime = ctx.currentTime;
            
            frequencies.forEach((freq, index) => {
                const oscillator = ctx.createOscillator();
                const gainNode = ctx.createGain();
                
                oscillator.connect(gainNode);
                gainNode.connect(ctx.destination);
                
                oscillator.frequency.setValueAtTime(freq, startTime);
                oscillator.type = config.waveType || 'sine';
                
                const duration = durations[index] || durations[0];
                const volume = volumes[index] || volumes[0] || 0.3;
                
                // Envelope
                gainNode.gain.setValueAtTime(0, startTime);
                gainNode.gain.linearRampToValueAtTime(volume, startTime + fadeIn);
                gainNode.gain.linearRampToValueAtTime(volume, startTime + duration - fadeOut);
                gainNode.gain.linearRampToValueAtTime(0, startTime + duration);
                
                oscillator.start(startTime);
                oscillator.stop(startTime + duration);
                
                startTime += duration + (config.gap || 0);
            });
        }
        
        // Sound configurations
        const soundConfigs = {
            bell: {
                frequencies: [800, 1000, 800],
                durations: [0.3, 0.2, 0.4],
                volumes: [0.4, 0.3, 0.4],
                waveType: 'sine',
                gap: 0.1
            },
            chime: {
                frequencies: [523.25, 659.25, 783.99], // C5, E5, G5
                durations: [0.8, 0.8, 1.2],
                volumes: [0.3, 0.25, 0.3],
                waveType: 'triangle',
                gap: 0.2
            },
            ding: {
                frequencies: [1200, 1500],
                durations: [0.15, 0.25],
                volumes: [0.35, 0.25],
                waveType: 'sine',
                gap: 0.05
            },
            notification: {
                frequencies: [600, 800, 1000, 800],
                durations: [0.2, 0.2, 0.3, 0.3],
                volumes: [0.3, 0.35, 0.4, 0.3],
                waveType: 'square',
                gap: 0.1
            },
            gentle: {
                frequencies: [440, 554.37], // A4, C#5
                durations: [1.0, 1.5],
                volumes: [0.2, 0.15],
                waveType: 'sine',
                gap: 0.3,
                fadeIn: 0.3,
                fadeOut: 0.5
            },
            success: {
                frequencies: [523.25, 659.25, 783.99, 1046.50], // C5, E5, G5, C6
                durations: [0.2, 0.2, 0.2, 0.6],
                volumes: [0.3, 0.35, 0.4, 0.45],
                waveType: 'triangle',
                gap: 0.05
            }
        };
        
        // Play functions
        function playBell() { generateSound(soundConfigs.bell); }
        function playChime() { generateSound(soundConfigs.chime); }
        function playDing() { generateSound(soundConfigs.ding); }
        function playNotification() { generateSound(soundConfigs.notification); }
        function playGentle() { generateSound(soundConfigs.gentle); }
        function playSuccess() { generateSound(soundConfigs.success); }
        
        // Download functions (placeholder - would need server-side processing for actual MP3 generation)
        function downloadBell() { alert('请使用音频录制软件录制试听音频，或使用在线音频转换工具'); }
        function downloadChime() { alert('请使用音频录制软件录制试听音频，或使用在线音频转换工具'); }
        function downloadDing() { alert('请使用音频录制软件录制试听音频，或使用在线音频转换工具'); }
        function downloadNotification() { alert('请使用音频录制软件录制试听音频，或使用在线音频转换工具'); }
        function downloadGentle() { alert('请使用音频录制软件录制试听音频，或使用在线音频转换工具'); }
        function downloadSuccess() { alert('请使用音频录制软件录制试听音频，或使用在线音频转换工具'); }
    </script>
</body>
</html>
